<template>
	<view>
		<view class="rows">
			<view class="navBar" :style="{ background: bgColor, color: color }">
				<view class="rows" :style="{ height: `${System.statusBarHeight}px` }"></view>
				<view class="row a-center" :style="{ height: `${navHeight}px`, width: `${navWidth}px` }">
					<block v-if="multiple_Card">
						<view class="left_CardBag">
							<view class="iconfont fontFull" @click.stop="backBtn" :class="iconLeft"></view>
							<view class="iconfont icon-qiabao fontFull" @click.stop="toCardBag"></view>
						</view>
					</block>
					<block v-if="fromShare == 1 && !multiple_Card">
						<view class="left" @click="$common.backHome()">
							<view class="iconfont icon-shouyeT21 size36 p-left24"></view>
						</view>
					</block>
					<block v-else>
						<view class="left" @click="backBtn" v-if="singleBack">
							<view class="iconfont icon-shouye2 size36 p-left24" :class="iconLeft"></view>
						</view>
					</block>
					
					<!-- 定位 -->
					<view v-if="content == 2" class="d-flex a-center p-left30 p-right30" @click="chooseLocation">
						<text class="iconfont icon-dingwei size32"></text>
						<text class="size30 ellipsis p-left20">{{ homeAddress ? `送至：${homeAddress}` : '请选择您的位置' }}</text>
						<text class="iconfont icon-xiangxia1 size32 p-left10"></text>
					</view>
					<!-- 图片 -->
					<view class="height" :class="{ 'm-left90': searchShow }" v-else-if="content == 1">
						<image :src="$imgUrls(img)" mode="heightFix" :style="{ 'margin-left': marginLeft ? marginLeft * 2 + 'rpx' : 0 }"></image>
					</view>
					<!-- 文字 -->
					<view v-else class="flex-1 title ellipsis p-left24" :class="{ 'm-left90': searchShow }">{{ title }}</view>
				</view>
			</view>
		</view>
		<view class="rows" :style="{ height: System.statusBarHeight + navHeight + 'px' }" v-if="transparent"></view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		name: 'navBar',
		props: {
			title: {
				type: String,
				default: ''
			},
			transparent: {
				type: Boolean,
				default: true
			},
			color: {
				type: String,
				default: '#000000'
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			isBack: {
				type: Boolean,
				default: true
			},
			isTabbar: {
				type: Boolean,
				default: false
			},
			searchShow: {
				type: Boolean,
				default: false
			},
			multiple_Card: {
				type: Boolean,
				default: false
			},
			fromShare: {
				type: Number,
				default: 0
			},
			content: {
				type: Number,
				default: 0
			},
			img: {
				type: String,
				default: ''
			},
			marginLeft: {
				type: Number,
				default: 0
			}
		},

		data() {
			return {
				capsuleWidth: getApp().globalData.capsuleWidth
			}
		},
		methods: {
			...mapMutations(['setHome']),
			backBtn() {
				if (this.isTabbar) return
				if (this.isBack) return this.back()
				this.backHome()
			},
			toCardBag() {
				this.toUrl(`/subCard/cardBag`)
			},
			chooseLocation() {
				if(!this.vid) return this.setHome({showMode: true})
				this.toUrl('/orderPage/Addresslist/Addresslist')
				this.$emit('toAddress')
			}
		},
		computed: {
			...mapState(['System', 'navHeight', 'navWidth', 'vid', 'homeAddress']),
			singleBack() {
				if (!this.isTabbar && !this.searchShow) {
					return true
				}
			},
			iconLeft() {
				return this.isBack ? 'icon-xiangzuo' : 'icon-shouye-zhihui'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navBar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}

	.left {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.left_CardBag {
		width: 200rpx;
		height: 90%;
		background-color: #ffffff;
		border: 1rpx solid #ccc;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
		margin-left: 20rpx;
	}

	.left_CardBag::before {
		content: '';
		width: 1px;
		height: 60%;
		background-color: #ccc;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.title {
		line-height: 40px;
		font-size: 32rpx;
		font-weight: bold;
	}

	.fontFull {
		flex: 1;
		display: flex;
		justify-content: center;
		font-size: 36rpx;
	}
</style>